﻿<!-- 微信手机号登录 - wechatPhoneLogin  -->
<template>
  <view>
    <!-- 标题栏 -->
    <view class="head-box ss-m-b-60 ss-flex-col">
      <view class="ss-flex ss-m-b-20">
        <view class="head-title ss-m-r-40 head-title-animation">微信登录</view>
        <view class="head-title-active head-title-line" @tap="showAuthModal('smsLogin')">
          短信登录
        </view>
      </view>
      <view class="head-subtitle">使用微信授权手机号快速登录</view>
    </view>

    <!-- 微信授权按钮 -->
    <view class="login-container">
      <button 
        class="ss-reset-button wechat-phone-btn"
        open-type="getPhoneNumber"
        @getphonenumber="handleGetPhoneNumber"
      >
        <view class="ss-flex ss-col-center">
          <text class="btn-text">微信手机号登录</text>
        </view>
      </button>
      
      <button class="ss-reset-button other-login-btn" @tap="showAuthModal('smsLogin')">
        使用其他方式登录
      </button>
    </view>
  </view>
</template>

<script setup>
  import { reactive } from 'vue';
  import sheep from '@/sheep';
  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';

  const props = defineProps({
    agreeStatus: {
      type: Boolean,
      default: false,
    },
  });

  const state = reactive({
    loading: false,
  });

  // 处理微信获取手机号
  async function handleGetPhoneNumber(e) {
    
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
      sheep.$helper.toast('授权失败，请重试');
      return;
    }

    // 检查是否同意协议
    if (!props.agreeStatus) {
      sheep.$helper.toast('请勾选同意服务协议');
      return;
    }

    try {
      state.loading = true;
      
      // 调用后端接口获取手机号
      const phoneResult = await sheep.$api.user.getPhonenumber(e.detail.code);
      
      if (phoneResult && phoneResult.data) {
        const phoneNumber = phoneResult.data;
        
        // 使用获取到的手机号进行登录
        // 这里可以直接调用短信登录接口，不需要验证码
        const loginData = {
          mobile: phoneNumber,
          loginType: 'wechat_phone', // 标识为微信手机号登录
          openId: uni.getStorageSync('openId'),
          authInfo: sheep.$store('app').authInfo || {}
        };
        
        const loginResult = await sheep.$api.user.smsLogin(
          sheep.$helper.base64Encode(JSON.stringify(loginData))
        );
        
        if (loginResult) {
          sheep.$helper.toast('登录成功');
          closeAuthModal();
          
          // 记录登录
          sheep.$api.user.recordLogin();
        }
      }
    } catch (error) {
      sheep.$helper.toast('登录失败，请重试');
    } finally {
      state.loading = false;
    }
  }
</script>

<style lang="scss" scoped>
  @import '../index.scss';
  
  .login-container {
    padding: 40rpx 0;
  }
  
  .wechat-phone-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(90deg, #07c160 0%, #05a450 100%);
    border-radius: 44rpx;
    color: #fff;
    font-size: 32rpx;
    font-weight: 500;
    margin-bottom: 40rpx;
    box-shadow: 0 4rpx 20rpx rgba(7, 193, 96, 0.3);
    
    .btn-text {
      line-height: 88rpx;
    }
  }
  
  .other-login-btn {
    width: 100%;
    height: 88rpx;
    background: transparent;
    border: 2rpx solid #e4e7ed;
    border-radius: 44rpx;
    color: #606266;
    font-size: 28rpx;
    line-height: 88rpx;
  }
  
  .wechat-phone-btn:active {
    background: linear-gradient(90deg, #05a450 0%, #048a43 100%);
  }
  
  .other-login-btn:active {
    background: #f5f7fa;
  }
</style> 
